<template>
  <view
    class="list-head"
    :class="{ sticky: sticky }"
    :style="'margin-left: ' + stickyLeft + 'px'"
  >
    <view class="sticky-container">
      <view :class="{ 'safe-left': sticky, 'safe-right': sticky }">
        <u-tabs
          class="tabs"
          lineColor="#31C557"
          lineWidth="20"
          lineHeight="3"
          :activeStyle="activeStyle"
          :list="tabList"
          :itemStyle="itemStyle"
          :current="tabIndex"
          @click="clickTab"
        />

        <view class="sift-view flex flex-middle">
          <view
            class="sift-item flex flex-center flex-middle"
            :class="{ active: index == siftIndex }"
            v-for="(item, index) in siftList"
            :key="index"
            @click="changeSift(index)"
          >
            {{ item }}
            <u-icon
              class="icon"
              name="arrow-down-fill"
              size="8"
              :color="index == siftIndex ? '#333333' : '#C1C1C1'"
              v-show="index == siftIndex"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    refresh: {
      type: Function,
      default: () => {},
    },
    changeTab: {
      type: Function,
      default: () => {},
    },
    sticky: {
      type: Boolean,
      default: false,
    },
    listLoad: {
      type: Boolean,
      default: false,
    },
    tabIndex: {
      type: Number,
      default: false,
    },
  },
  data() {
    return {
      siftIndex: 0,
      siftList: ["智能排序", "评分", "距离"],
      tabList: [
        {
          name: "匠人",
        },
        {
          name: "服务",
        },
      ],
      activeStyle: {
        color: "#333333",
        fontSize: "18px",
      },
      inactiveStyle: {
        color: "#979797",
        fontSize: "16px",
      },
      itemStyle: {
        height: "46px",
        width: "78px",
      },
    };
  },
  computed: {
    ...mapGetters(["system"]),
    stickyLeft() {
      return this.sticky ? -(this.system.safeAreaInsets.left + 16) : 0;
    },
  },
  methods: {
    changeSift(index) {
      if (this.listLoad) return; // 节流
      this.siftIndex = index;
      this.refresh();
    },
    clickTab({ index }) {
      if (this.listLoad) return; // 节流
      this.changeTab(index);
      this.refresh();
    },
  },
};
</script>

<style scoped lang="scss">
.list-head {
  background: linear-gradient(179deg, #f3fff6 0%, #ffffff 100%);
  height: 80px;
  border-radius: 8px 8px 0 0;
}

.sticky {
  border-radius: 0 !important;
  border-bottom: 1px solid #ccc;
  width: 100vw;

  .sticky-container {
    padding: 0 16px;
  }
}

.sift-view {
  height: 34px;

  .active {
    color: #333333 !important;
  }

  .sift-item {
    height: 34px;
    width: 33.33%;
    color: #c1c1c1;

    .icon {
      margin-left: 4px;
    }
  }
}

.tabs {
  width: 200px;
  margin: 0 auto;
}
</style>